<template>
	<view class="station-select-form-item-compontent">
		<view class="p-form-label" v-if="label"><text v-if="required" class="required-tag">*</text>{{label}}：</view>
		<view class="form-row">
			<view class="mask" @tap.stop="" v-if="disabled || loading">
				<template v-if="loading">
					<u-loading-icon color="#f0f8ff" />
					<text style="margin-left:20rpx;color:#f0f8ff;">Loading...</text>
				</template>
			</view>
			<view class="form-items-view">
				<view class="select-block" @tap.stop="onOpenPicker1">
					<view class="input-view">
						<text v-if="!value1" class="placeholder">{{placeholder1}}</text>
						<text v-else>{{valueLabel1}}</text>
					</view>
					<view class="close-view" @tap.stop="onClear1" v-if="value1 && clearable">
						<view class="close-circle">
							<u-icon
							    name="close"
							    size="11"
							    color="#ffffff"
							    customStyle="line-height: 12px"
							></u-icon>
						</view>
					</view>
					<view class="right-icon-view"><u-icon name="arrow-down" color="#909193" :size="24"></u-icon></view>
				</view>
				<view class="divider"></view>
				<view class="select-block" @tap.stop="onOpenPicker2">
					<view class="input-view">
						<text v-if="!value2" class="placeholder">{{placeholder2}}</text>
						<text v-else>{{valueLabel2}}</text>
					</view>
					<view class="close-view" @tap.stop="onClear2" v-if="value2 && clearable">
						<view class="close-circle">
							<u-icon
							    name="close"
							    size="11"
							    color="#ffffff"
							    customStyle="line-height: 12px"
							></u-icon>
						</view>
					</view>
					<view class="right-icon-view"><u-icon name="arrow-down" color="#909193" :size="24"></u-icon></view>
				</view>
			</view>
		</view>
		<view class="msg-row" v-if="msg" :class="[msgType==='info'?'info-type':'']">{{msg}}</view>
		
		<easy-picker :visible.sync="pickerVisible1" :list="list1" :value-field="valueField1" :label-field="labelField1" @select="onPickerSelect1" />
		<easy-picker :visible.sync="pickerVisible2" :list="list2" :value-field="valueField2" :label-field="labelField2" @select="onPickerSelect2" />
	</view>
</template>

<script>
import EasyPicker from '@/components/EasyPicker.vue'
const LINE_VALUE_FIELD = 'productionlineId'
const LINE_LABEL_FIELD = 'productionlineName'
const STATION_VALUE_FIELD = 'takeMaterialsSiteId'
const STATION_LABEL_FIELD = 'takeMaterialsSite'
export default {
	name:'stationSelectFormItemComponent',
	components:{EasyPicker},
	emits:['input','select'],
	props:{
		value:{
			type:Array,
			default:function(){
				return []
			}
		},
		label:{
			type:String,
			default:''
		},
		placeholder1:{
			type:String,
			default:'产线'
		},
		placeholder2:{
			type:String,
			default:'工位'
		},
		msg:{
			type:String,
			default:''
		},
		msgType:{
			type:String,
			default:'error'
		},
		disabled:{
			type:Boolean,
			default:false
		},
		clearable:{
			type:Boolean,
			default:true
		},
		required:{
			type:Boolean,
			default:false
		}
	},
	data(){
		return {
			list1:[],
			list2:[],
			value1:undefined,
			value2:undefined,
			valueLabel1:undefined,
			valueLabel2:undefined,
			valueObj1:null,
			valueObj2:null,
			pickerVisible1:false,
			valueField1:LINE_VALUE_FIELD,
			labelField1:LINE_LABEL_FIELD,
			pickerVisible2:false,
			valueField2:STATION_VALUE_FIELD,
			labelField2:STATION_LABEL_FIELD,
			loading:false
		}
	},
	mounted(){
	  this.init()
	},
	methods:{
		init(){
			this.loading = true
			this.getLines((f)=>{
				if (f) {
					this.setChangeValues(()=>{
						this.loading = false
					})
				} else {
					this.loading = false
				}
			})
		},
		setChangeValues(callback){
			if (this.value) {
				if (this.value[0]) {
					this.value1 = this.value[0]
					this.valueLabel1 = this.getLineLabelByValue(this.value1)
					this.getStations((f)=>{
						if (f) {
							if (this.value[1]) {
								this.value2 = this.value[1]
								this.valueLabel2 = this.getStationLabelByValue(this.value2)
								this.backValue()
							}
							callback && callback(true)
						} else {
							callback && callback(false)
						}
					})
				} else {
					callback && callback(true)
				}
			} else {
				callback && callback(true)
			}
		},
		getLineLabelByValue(val) {
			let res = val;
			for (let i=0;i<this.list1.length;i++) {
				if (this.list1[i][LINE_VALUE_FIELD]===val) {
					this.valueObj1 = this.list1[i]
					res = this.list1[i][LINE_LABEL_FIELD]
					break
				}
			}
			return res
		},
		getStationLabelByValue(val) {
			let res = val;
			for (let i=0;i<this.list2.length;i++) {
				if (this.list2[i][STATION_VALUE_FIELD]===val) {
					this.valueObj2 = this.list2[i]
					res = this.list2[i][STATION_LABEL_FIELD]
					break
				}
			}
			return res
		},
		getLines(callback){
			this.$api.get('GetProductionlineList',{},{block:'station',loading:false}).then((d)=>{
				this.list1 = d || []
				if (this.list1.length===1) {
					this.valueObj1 = this.list1[0]
					this.value1 = this.list1[0][LINE_VALUE_FIELD]
					this.valueLabel1 = this.list1[0][LINE_LABEL_FIELD]
					this.backValue()
				}
				callback && callback(true)
			}).catch((_errmsg)=>{
				this.clearAllValue()
				this.backValue()
				callback && callback(false)
			})
		},
		getStations(callback,isInit=false){
			this.$api.get('GetStationList',{id:this.value1},{block:'station',loading:false}).then((d)=>{
				this.list2 = d || []
				if (this.list2.length===1) {
					this.valueObj2 = this.list2[0]
					this.value2 = this.list2[0][STATION_VALUE_FIELD]
					this.valueLabel2 = this.list2[0][STATION_LABEL_FIELD]
				} else {
					this.clearValue2()
				} 
				this.backValue()
				callback && callback(true)
			}).catch((_errmsg)=>{
				this.list2 = []
				this.clearValue2()
				this.backValue()
				callback && callback(false)
			})
		},
		onOpenPicker1(){
			if (this.list1.length<=0) return false
			this.pickerVisible1 = true
		},
		onOpenPicker2(){
			if (this.list2.length<=0) return false
			this.pickerVisible2 = true
		},
		onPickerSelect1(value,selection){
			if (value===this.value1) return false
			this.value1 = value
			this.valueObj1 = selection
			this.valueLabel1 = selection[LINE_LABEL_FIELD]
			this.loading = true
			this.getStations(()=>{
				this.backSelect()
				this.loading = false
			})
		},
		onPickerSelect2(value,selection){
			if (value===this.value2) return false
			this.value2 = value
			this.valueObj2 = selection
			this.valueLabel2 = selection[STATION_LABEL_FIELD]
			this.backValue()
			this.backSelect()
		},
		onClear1(){
			this.clearAllValue()
			this.list2 = []
			this.backValue()
		},
		onClear2(){
			this.clearValue2()
			this.backValue()
		},
		clearAllValue(){
			this.clearValue1()
			this.clearValue2()
		},
		clearValue1(){
			this.value1 = undefined
			this.valueObj1 = null
			this.valueLabel1 = undefined
		},
		clearValue2(){
			this.value2 = undefined
			this.valueObj2 = null
			this.valueLabel2 = undefined
		},
		backValue(){
		  this.$emit('input',[this.value1,this.value2])
		},
		backSelect(){
		  this.$emit('select',[this.value1,this.value2],[{...this.valueObj1},{...this.valueObj2}])
		}
	}
}
</script>

<style scoped lang="scss">
.station-select-form-item-compontent {
	width: 100%;
	.p-form-label{
		font-size: 32rpx;
		color: $u-tips-color;
		padding-bottom: 12rpx;
		padding-left: 20rpx;
		.required-tag{
			color:#ff0000;
		}
	}
	.form-row{
		width: 100%;
		height: 90rpx;
		overflow: hidden;
		position: relative;
		.form-items-view {
			height: 100%;
			width: 100%;
			display: flex;
			.divider{
				width: 20rpx;
				flex-shrink: 0;
			}
			.select-block{
				width: 1%;
				flex-grow: 1;
				background-color: $uni-bg-color;
				display: flex;
				align-items: center;
				.close-view,.right-icon-view{
					flex-shrink: 0;
					display: flex;
					align-items: center;
					justify-content: center;
				}
				.right-icon-view{
					padding-right: 10rpx;
				}
				.close-view{
					.close-circle{
						width: 20px;
						height: 20px;
						border-radius: 50%;
						background-color: #c6c7cb;
						display: flex;
						flex-direction: row;
						align-items: center;
						justify-content: center;
						transform: scale(0.82);
						margin-left: 4px;
					}
				}
				.input-view{
					flex-grow: 1;
					padding-left: 20rpx;
					font-size: 30rpx;
					white-space:nowrap;
					overflow:hidden;
					text-overflow:ellipsis;
					color: rgb(48, 49, 51);
					.placeholder{
						color: rgb(192, 196, 204);
					}
				}
			}
		}
		&>.mask{
			background-color: #000;
			opacity: 0.25;
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			z-index: 100;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #f2f2f2;
		}
	}
	.msg-row{
		padding: 6rpx 20rpx 0 20rpx;
		line-height: 1.3;
		font-size: 24rpx;
		color: $u-error;
		word-break:break-all;
		word-wrap:break-word;
		&.info-type{
			color:$color-blue;
		}
	}
}
</style>